<template>
      <el-dialog
        title="Detail"
        :visible.sync="dialogVisible"
        width="50%"
        >
          <ejs-grid :dataSource="dataInfo" :allowResizing='true' :allowFiltering='true' :filterSettings='filterSettings' :allowGrouping='true' :allowPaging='true' :toolbar="toolbar"  :showColumnChooser='true' :allowReordering='true' :allowSorting='true' :pageSettings="pageSettings">
            <e-columns>
              <e-column   field="newDate"  :headerText="$t('custom.marketbot.scorecard.newDate')"  textAlign="Right" width="90"></e-column>
              <e-column   field="clientId" :headerText="$t('custom.marketbot.scorecard.clientId')" textAlign="Right" width="90"></e-column>
              <e-column   field="clientName" :headerText="$t('custom.marketbot.scorecard.clientName')" textAlign="Right" width="90"></e-column>
            </e-columns>
          </ejs-grid>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogVisible = false">{{ $t('cancel') }}</el-button>
        </span>
      </el-dialog>
</template>

<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dataInfo: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      pageSettings: { pageSize: 10, pageSizes: [10, 50, 100, 200] },
      filterSettings: { type: 'Excel' },
      toolbar: ['ColumnChooser']
    }
  }

}
</script>

<style>

</style>
